bubbleのページSlugを使ってみるよ

Slugとは、データタイプないに保存されたThingに割り当ててURLとして機能する組み込みのデータフィールドです。

実際のデータタイプを確認してみると、

SlugというフィールドがBuilt in fieldとして存在しています。

ここに値が入っていればSlugの機能を使うことができますが、どういったときに使えるのでしょうか？

Bubbleアプリで前のページから渡された情報をうけとって表示するページを作りたい場合、

ページ設定のType of content という設定を使ってデータを受け取ることができます。

具体的な例だと、ユーザーや組織一覧ページから、選択したユーザーや組織の詳細ページを表示させるときなどに使えます。

このような遷移をするときに、BubbleのURLは

パスに長い文字列がつきます。この文字列はフィールドのunique idです。

Slugを使うとこのunique idを任意の文字列に変えてURLを作ることができます。

こんな感じに。

Slugを設定してみる

アプリのDataページにあるApp data から直接設定するか、workflowで設定することができます。

App dataから直接設定

App dataのページから対象のThingを選択して追加できます。

なお、Slugには　小文字、数字、-　のみを使用でき、250文字未満　である必要があります　とドキュメントには書かれています。

が、日本語を登録できました。URLも登録した値になっています。

Slugs support all languages. If you notice any language that isn't supported or being incorrectly processed, please contact [email protected]

ドキュメントに上記のルールが書かれていたのですが、これに該当しているのかもしれません。

workflowから設定

Actionの追加のData(Things)の中にあるSet a things slug で設定できます。

Things to change　でSlugを設定するとき条件を追加し、

Slug の箇所で動的に設定することができます。

※ 画像はランダム文字列を登録する時の設定です

Slugの条件式

Slugの追加だけでなく、有効なSlug値であるかどうかのテストをすることも可能です。

• Can Have The Slug Value
  • この操作は、引数がシングの有効なスラッグ値であるかどうかをテストします。有効なスラッグ値は、ユニークであり、小文字、数字、ハイフンのみで正しくフォーマットされています
• Cannot Have The Slug Value
  • この操作は、引数がThingの無効なスラッグ値であるかどうかをテストします。無効なスラッグ値とは、小文字、数字、ハイフンのみで構成されていないものや、ユニークではないものを指します

Slugの値を入力して登録するケースだと、

入力値がすでに登録されているSlugかどうかを確認できますね。

最後に

Slugを使用することでリソースを表示させるためのURLに意味を持たせることが可能になります。

unique idではちょっとなーと思ったら設定してみましょう。